import React, { Component } from 'react'
import { SearchBar } from 'antd-mobile'

class Form extends Component {
  constructor(props) {
    super(props)
    // console.log(localStorage.getItem('histoies'))
  }

  state = {
    histoies: localStorage.getItem('histoies') ? JSON.parse(localStorage.getItem('histoies')) : []
  }

  onSubmit = value => {
    // 先读取本地存储中的数据
    // let histoies = localStorage.getItem('histoies') ? JSON.parse(localStorage.getItem('histoies')) : []
    let histoies = this.state.histoies
    histoies.unshift(value)
    this.state.histoies = histoies.slice(0, 3)
    // 写入到本地存储中
    localStorage.setItem('histoies', JSON.stringify(this.state.histoies))
    // 通知视图更新
    this.setState({})
  }
  render() {
    return (
      <div>
        <SearchBar placeholder="请输入搜索的关键词" maxLength={20} onSubmit={this.onSubmit} />
      </div>
    )
  }
}

export default Form
